<template>
    <el-card :style="{minHeight:`${height}px`}">
        <div slot="header" style="text-align: right">
            <el-button type="primary" @click="editMenu(0,null,'add')">新增</el-button>
        </div>
        <el-tree
            ref="tree"
            :data="adminMenu"
            node-key="id"
            default-expand-all
            :expand-on-click-node="true"
        >
         <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click.stop="editMenu(node.level,data.menu_id,'edit')">编辑</el-button>
              <el-button v-if="node.level === 1" type="text" size="mini" @click.stop="editMenu(node.level,data.menu_id,'add')">新增</el-button>
              <el-button type="text" size="mini" @click.stop="deleteMenu(data.menu_id)">删除</el-button>
            </span>
          </span>
        </el-tree>

        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="60%"
        >
            <nav-menu-edit
                ref="navMenuEdit"
                @success="getList"
            />
        </el-dialog>
    </el-card>
</template>

<script>
    import {getHeight} from "@/utils/regular";
    import NavMenuEdit from "./navMenuEdit";
    import { menuDelete,menuList, } from '@/api/menu'

    export default {
        name: "navMenuList",
        components: {NavMenuEdit},
        data() {
            return {
                height: 0,
                tableHeight: 0,
                dialogVisible:false,
                parent_id: '',
                title: '',
                adminMenu:[],
            }
        },
        created() {
            this.height = getHeight() - 92
            this.tableHeight = getHeight() - 258
            this.getList()
        },
        methods: {
            getList(){
                this.dialogVisible = false
                menuList()
                    .then(res=>{
                        if (Number(res.code) === 0) {
                            this.adminMenu = res.data
                        } else {
                            this.$Alert({message: res.msg, type: 'error'})
                        }
                    })
            },
            editMenu(level,menu_id,type){
                let parent_id = null
                let levelStr = ''

                // 新增一级
                if(level == 0 && type == 'add' ){
                    levelStr = ''
                    parent_id = menu_id
                    menu_id = null
                }

                // 新增二级
                if(level == 1 && type == 'add' ){
                    levelStr = '二级'
                    parent_id = menu_id
                    menu_id = null
                }

                // 编辑二级
                if(level == 2){
                    parent_id = menu_id
                    levelStr = '二级'
                }

                this.dialogVisible = true
                this.title = menu_id?`编辑${levelStr}导航`:`新增${levelStr}导航`
                this.$nextTick(()=>{
                    this.$refs.navMenuEdit.openMask(menu_id,parent_id)
                })
            },
            deleteMenu(menu_id){
                this.$Confirm({
                    message: '确定删除导航',
                    confirmButtonText: '立即删除',
                    success: () => {
                        menuDelete(menu_id)
                            .then(res => {
                                if (Number(res.code) === 0) {
                                    this.$Alert({
                                        message: res.msg,
                                        type: 'success',
                                        callback:()=>{
                                            this.getList()
                                        }
                                    })
                                } else {
                                    this.$Alert({message: res.msg, type: 'error'})
                                }
                            })
                    }
                })
            },
        },
    }
</script>

<style scoped lang="less">
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
